<!-- 个人申请 -->
<template>
  <view class="form-container">
    <!-- 头部标题 -->
    <view>
      <view style="position: absolute; top: 110rpx" @click="goBack">
        <u-icon name="arrow-left" color="white" size="30"></u-icon>
      </view>
      <view class="header">
        <text class="header-title">个人信息</text>
        <text class="header-subtitle">请完善以下信息，我们将为您精准匹配</text>
      </view>
    </view>

    <view class="form-wrapper">
      <u--form
        :model="form"
        ref="dataForm"
        labelPosition="left"
        :rules="rules"
        labelWidth="160rpx"
        :labelStyle="{
          color: '#333',
          fontWeight: '500',
          fontSize: '28rpx',
        }"
      >
        <!-- 基本信息部分 -->
        <view class="form-section">
          <view class="section-title">
            <u-icon name="account" color="#4A90E2" size="32"></u-icon>
            <text class="section-text">基本信息</text>
          </view>

          <u-form-item
            label="邀请码"
            prop="parent_id"
            :borderBottom="false"
            v-if="state.ZhanShiMa"
          >
            <view
              style="margin: 10rpx 0"
              v-if="state.tgcompany_name"
              v-show="state.tgcompany_name"
              >姓名：{{ state.tgcompany_name }}</view
            >
            <u--input
              v-if="!state.tgcompany_name"
              v-model="form.parent_id"
              placeholder="请输入邀请码"
              placeholderClass="placeholder-style"
              inputClass="input-style"
              @blur="handleBlur"
              :disabled="state.tg"
            ></u--input>
            <view v-if="state.tgcompany_name" style="margin-left: 10px">
              邀请码：{{ state.share_code }}
            </view>
          </u-form-item>
          <u-form-item prop="role" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>类型:</text>
            </view>
            <u-checkbox-group
              v-model="form.role"
              placement="column"
              @change="handleRoleChange"
            >
              <u-checkbox
                :customStyle="{ marginBottom: '8px' }"
                label="居间人"
                :name="1"
              >
              </u-checkbox>
              <u-checkbox
                :customStyle="{ marginBottom: '8px' }"
                label="电力行业从业"
                :name="2"
              >
              </u-checkbox>
              <u-checkbox
                :customStyle="{ marginBottom: '8px' }"
                label="求职者"
                :name="3"
              >
              </u-checkbox>
            </u-checkbox-group>
          </u-form-item>
          <u-form-item prop="realname" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>姓名:</text>
            </view>
            <u--input v-model="form.realname" placeholder="请输入姓名" />
          </u-form-item>
          <u-form-item prop="work_company" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>所在单位:</text>
            </view>
            <u--input
              v-model="form.work_company"
              placeholder="请输入所在单位"
              maxlength="50"
            />
          </u-form-item>
          <u-form-item prop="duty" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>职务:</text>
            </view>
            <u--input
              v-model="form.duty"
              placeholder="请输入职务"
              maxlength="30"
            />
          </u-form-item>
          <u-form-item prop="birthday" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>出生年月日:</text>
            </view>
            <!-- <u--input v-model="form.birthday" placeholder="请输入出生年月日" /> -->
            <view
              @click="state.runDatePickerShow = true"
              style="
                border: 1px solid #e4e7ed;
                color: #e4e7ed;
                width: 62%;
                padding: 10px;
                border-radius: 3%;
              "
            >
              {{ form.birthday ? form.birthday : "请选择日期" }}
            </view>
            <u-datetime-picker
              :show="state.runDatePickerShow"
              v-model="form.birthday"
              :formatter="formatter"
              mode="date"
              @confirm="runDatePickerConfirm"
              @cancel="state.runDatePickerShow = false"
            ></u-datetime-picker>
          </u-form-item>
          <u-form-item prop="sex" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>性别:</text>
            </view>
            <u-radio-group v-model="form.sex">
              <u-radio
                v-for="item in genderOptions"
                :key="item.value"
                :label="item.label"
                :name="item.value"
                style="margin-right: 40rpx"
              ></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item prop="xue_li" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>学历:</text>
            </view>
            <u--input
              v-model="form.xue_li"
              placeholder="请输入学历（如：本科/硕士）"
              maxlength="20"
            />
          </u-form-item>
          <u-form-item prop="university" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>毕业院校及专业:</text>
            </view>
            <u--input
              v-model="form.university"
              placeholder="请输入毕业院校及专业"
              maxlength="50"
            />
          </u-form-item>

          <u-form-item prop="mobile" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>手机号码:</text>
            </view>
            <u--input
              v-model="form.mobile"
              placeholder="请输入手机号码"
              type="number"
            />
          </u-form-item>
          <u-form-item prop="email" :borderBottom="false">
            <view class="xingX">
              <text class="xing"></text>
              <text>邮箱:</text>
            </view>
            <u--input v-model="form.email" placeholder="请输入邮箱" />
          </u-form-item>

          <u-form-item prop="city_code" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>常住城市:</text>
            </view>
            <u-area-picker
              v-model="form.city_code"
              closeOnClickOverlay
              showInput
              placeholder="请选择省市区"
              placeholderClass="placeholder-style"
              inputClass="input-style"
            ></u-area-picker>
          </u-form-item>
        </view>

        <view v-if="form.role.includes(3)">
          <u-form-item
            label="个人专长"
            prop="job_zhuan_chang"
            :borderBottom="false"
          >
            <u--input
              v-model="form.job_zhuan_chang"
              placeholder="请输入您的个人专长"
            />
          </u-form-item>
          <u-form-item
            label="教育经历"
            prop="job_school"
            :borderBottom="false"
            v-if="form.role.includes(3)"
          >
            <u--input v-model="form.job_school" placeholder="请输入教育经历" />
          </u-form-item>
          <u-form-item
            label="工作经历"
            prop="job_history"
            :borderBottom="false"
          >
            <u--textarea
              v-model="form.job_history"
              placeholder="请详细描述您的工作经历"
              height="200"
              count
            />
          </u-form-item>
          <u-form-item label="求职意向" prop="job_want" :borderBottom="false">
            <u--input v-model="form.job_want" placeholder="请输入求职意向" />
          </u-form-item>

          <u-form-item label="专兼职" prop="type" :borderBottom="false">
            <u-radio-group v-model="form.job_type">
              <u-radio
                v-for="item in jobTypeOptions"
                :key="item.value"
                :label="item.label"
                :name="item.value"
                style="margin-right: 40rpx"
              ></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="期望待遇" prop="job_salary" :borderBottom="false">
            <u--input
              v-model="form.job_salary"
              placeholder="请输入期望待遇"
              type="number"
            />
          </u-form-item>
          <u-form-item
            label="自我介绍"
            prop="job_introduce"
            :borderBottom="false"
          >
            <u--textarea
              v-model="form.job_introduce"
              placeholder="请简要介绍自己"
              height="200"
              count
            />
          </u-form-item>
        </view>

        <!-- 智库信息部分 -->
        <view>
          <u-form-item prop="join_is" :borderBottom="false">
            <view class="xingX">
              <text class="xing">*</text>
              <text>是否愿意加入电力智库:</text>
            </view>
            <u-radio-group v-model="form.join_is">
              <u-radio
                label="愿意"
                :name="2"
                style="margin-right: 40rpx"
              ></u-radio>
              <u-radio label="不愿意" :name="1"></u-radio>
            </u-radio-group>
          </u-form-item>

          <u-form-item
            prop="join_gong_xian"
            :borderBottom="false"
            v-if="form.join_is == 2"
          >
            <view class="xingX">
              <text class="xing">*</text>
              <text>加入智库可贡献:</text>
            </view>
            <u--textarea
              v-model="form.join_gong_xian"
              placeholder="请描述您可以贡献的内容 人脉、业务资源、企业管理、技术指导、施工指导等"
              height="200"
              count
            />
          </u-form-item>
          <u-form-item
            prop="join_why"
            :borderBottom="false"
            v-if="form.join_is == 2"
          >
            <view class="xingX">
              <text class="xing">*</text>
              <text>希望通过本平台获得什么:</text>
            </view>
            <u--textarea
              v-model="form.join_why"
              placeholder="请描述您希望通过平台获得什么"
              height="200"
              count
            />
          </u-form-item>

          <u-form-item
            label="居间业务"
            prop="ye_wu"
            :borderBottom="false"
            v-if="form.role.includes(1)"
          >
            <u--textarea
              v-model="form.ye_wu"
              placeholder="请描述您能提供的居间业务"
              height="200"
              count
            />
          </u-form-item>
        </view>
      </u--form>

      <!-- 提交按钮 -->
      <view class="submit-section">
        <u-button
          type="primary"
          text="提交信息"
          @click="submitForm"
          shape="circle"
          size="large"
          :customStyle="{
            width: '100%',
            height: '90rpx',
            borderRadius: '45rpx',
            fontSize: '32rpx',
            fontWeight: '500',
            background: 'linear-gradient(135deg, #4A90E2 0%, #357ABD 100%)',
            border: 'none',
            marginTop: '40rpx',
            boxShadow: '0 8rpx 24rpx rgba(74, 144, 226, 0.3)',
          }"
        />
        <text class="tip-text">提交后我们将尽快为您匹配合适的劳务资源</text>
      </view>
    </view>

    <!-- 城市选择器 -->
    <u-picker
      :show="cityPickerShow"
      :columns="cityColumns"
      keyName="label"
      @confirm="cityConfirm"
      @cancel="cityPickerShow = false"
    ></u-picker>
  </view>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, toRefs, defineExpose } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getResource } from "@/utils/Resource";
import { showToast, showLoading, hideLoading } from "@/utils/toast";
import { onLoad } from "@dcloudio/uni-app";
import {
  readByShareCode,
  PostUserExtsave,
  GetUserExt,
} from "@/api/userInfo.js";
const dataForm = ref(null);
import { formatDate } from "@/utils/date.js";
onLoad(async (e) => {
  if (e.id) {
    // 编辑场景：根据ID获取数据回显
    state.id = e.id;
    state.ZhanShiMa = false;
    await init();
  }

  if (e.company_type) {
    let roleMap = {
      11: 2, // 公司类型11对应角色2
      10: 3, // 公司类型10对应角色3
    };
    let roles = roleMap[e.company_type] || parseInt(e.company_type);
    if (roles && [1, 2, 3].includes(roles)) {
      form.value.role = [roles];
    }
  }
});

const state = reactive({
  runDatePickerShow: false,
  ZhanShiMa: true,
  cascaderOn_of: false,
  id: null,
  pickerShow: false,
  TreeShow: false,
  TreeData: [],
  TreeTitle: [],
  tg: false,
  tgcompany_name: "",
  form: {
    parent_id: "",
    role: [], // 角色数组：1=居间人，2=电力行业从业者，3=求职者（支持多选）
    realname: "", // 姓名
    work_company: "", // 所在单位
    duty: "", // 职务
    birthday: "", // 出生年月日
    sex: "", // 性别
    xue_li: "", // 学历
    university: "", // 大学
    mobile: "", // 手机号码
    email: "", // 邮箱
    city_code: "", // 常住城市
    join_is: "", // 是否愿意加入智库：1=不，2=愿意
    join_gong_xian: "", // 加入智库可贡献
    join_why: "", // 通过平台获得
    ye_wu: "", // 居间业务
    job_zhuan_chang: "", // 专长
    job_school: "", // 教育经历
    job_history: "", // 工作经历
    job_want: "", // 求职意向
    job_type: "", // 1=专职，2=兼职，3=专兼职均可
    job_salary: "", // 工资
    job_introduce: "", // 自我介绍
  },
  rules: {
    realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    // sex: [{ required: true, message: "请选择性别", trigger: "change" }],
    mobile: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
    birthday: [
      { required: true, message: "请输入出生年月日", trigger: "blur" },
    ],
    work_company: [
      { required: true, message: "请输入所在单位", trigger: "blur" },
    ],
    address: [{ required: true, message: "请输入居住地址", trigger: "blur" }],
    xue_li: [{ required: true, message: "请输入学历", trigger: "blur" }],
    duty: [{ required: true, message: "请输入职务", trigger: "blur" }],
    job_school: [
      { required: true, message: "请输入教育经历", trigger: "blur" },
    ],
    job_salary: [
      { required: true, message: "请输入期望待遇", trigger: "blur" },
    ],
    job_want: [{ required: true, message: "请输入求职意向", trigger: "blur" }],
  },
  genderOptions: [
    { label: "男", value: 1 },
    { label: "女", value: 2 },
  ],
  jobTypeOptions: [
    { label: "全职", value: 1 },
    { label: "兼职", value: 2 },
    { label: "均可", value: 3 },
  ],
  cityColumns: [],
});
const { form, rules, genderOptions, jobTypeOptions } = toRefs(state);

// 编辑时回显数据（字段名已统一，直接赋值）
const init = async () => {
  try {
    showLoading("加载中...");
    dataForm.value?.resetFields();
    const res = await GetUserExt();
    hideLoading();
    form.value = res.data;
    // if (res.data.role) {
    //   form.value.role = res.data.role;
    // }
  } finally {
    hideLoading();
  }
};
// 角色变化处理函数
const handleRoleChange = (values) => {};

// 提交表单
const submitForm = async () => {
  dataForm.value
    .validate()
    .then(async (valid) => {
      if (valid) {
        try {
          showLoading("提交中...");
          const res = await PostUserExtsave(form.value);
          if (res.code == 10000) {
            hideLoading();
            showToast("提交成功");
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 500);
          } else {
            hideLoading();
          }
        } catch (error) {}
      } else {
        showToast("请检查表单是否填写完整");
      }
    })
    .catch(() => {
      showToast("请检查表单是否填写完整");
    });
};

const goBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const handleBlur = async () => {
  // console.log(form.value.parent_id != "");

  if (form.value.parent_id != "") {
    try {
      const res = await readByShareCode(form.value.parent_id);
      console.log(res);
      if (res.code == 10000) {
        state.tgcompany_name = res.data.company_name;
        state.share_code = res.data.share_code;
        form.value.parent_id = res.data.id;
        state.tg = true;
      } else {
        state.tg = false;
      }
    } catch (error) {}
  }
};
const runDatePickerConfirm = (e) => {
  form.value.birthday = formatDate(new Date(e.value), "YYYY-MM-DD");
  console.log(form.value.birthday);

  state.runDatePickerShow = false;
};
const formatter = (type, value) => {
  if (type === "year") {
    return `${value}年`;
  }
  if (type === "month") {
    return `${value}月`;
  }
  if (type === "day") {
    return `${value}日`;
  }
  return value;
};
// 初始化（如需外部调用）
// const init = async (e) => {
//   dataForm.value?.resetFields();
//   try {
//     const res = await GetZhaoPin();
//     console.log(res);
//     TreeData.value = res.data;
//   } catch (error) {}
// };
// const list = [];
// const TreeOnConfirm = (e) => {
//   list.push({ id: e.value, title: e.label });
//   form.value.sys_label_id = list;
//   //   state.TreeTitle = e.label;
// };
</script>

<style lang="scss" scoped>
.xingX {
  width: 200rpx;
  display: flex;
  align-content: center;
}
.xing {
  color: red;
  margin-right: 4rpx;
}

.form-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding-bottom: 40rpx;
}

.header {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  padding: 100rpx 40rpx 40rpx;
  text-align: center;
  color: white;

  .header-title {
    display: block;
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }

  .header-subtitle {
    font-size: 26rpx;
    opacity: 0.9;
    line-height: 1.4;
  }
}

.form-wrapper {
  margin: 0 30rpx;
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.form-section {
  margin-bottom: 40rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 0 10rpx;

  .section-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-left: 16rpx;
  }
}

.submit-section {
  margin-top: 60rpx;
  text-align: center;

  .tip-text {
    display: block;
    color: #999;
    font-size: 24rpx;
    margin-top: 20rpx;
  }
}

// 输入框样式优化
:deep(.u-input) {
  font-size: 28rpx !important;
  color: #333 !important;
}

// 占位符样式
:deep(.u-input__input) {
  color: #333 !important;

  &::placeholder {
    color: #999 !important;
  }
}
</style>
